<template>
  <div>
    <el-dialog
      title="运营监测-数据查询-详情"
      :visible.sync="dialogVisible"
      width="90%"
      @open="open"
      @close="close"
    >
      <el-card v-loading="isLoading">
        <div id="carInfoBox_top">
          <div id="previewBox">
            <canvas id="videoCanvas" style="display: none"></canvas>

            <img src="~@/assets/img/tp.png" v-if="mediaUrl.length === 0" />
            <div v-else class="previewBox_innerBox">
              <img :src="mediaData.pictureUrl" v-show="mediaData.type === 1" />
              <video
                controls
                crossorigin="anonymous"
                :src="mediaData.pictureUrl"
                v-show="mediaData.type === 2"
                id="previewVideoBox"
              ></video>
              <cs-tag v-show="mediaData.type === 1">{{
                baseInfo_body_data[1].text.length > 7 ? '误识别' : baseInfo_body_data[1].text
              }}</cs-tag>
            </div>
          </div>

          <div id="previewItemBox" v-if="mediaUrl.length !== 0">
            <template v-for="item in urlData">
              <div
                class="previewItem"
                :class="mediaData.typeCode === null ? 'previewItemActive' : ''"
                v-if="item.typeCode === null"
                :key="item.bindKey"
              >
                <div
                  class="previewOption"
                  @click="
                    handlePreviewOptionClick({
                      type: item.type,
                      pictureUrl: item.pictureUrl,
                      typeCode: item.typeCode
                    })
                  "
                >
                  <div class="triangle_playIcon"></div>
                  <img :src="videoPreviewImgBox_url" ref="videoPreviewImgBox" />
                  <span class="previewDescribe previewDescribe_video">车牌视频</span>
                </div>
              </div>
              <div
                class="previewItem"
                :class="mediaData.typeCode === '5' ? 'previewItemActive' : ''"
                v-else-if="item.typeCode === '5'"
                :key="item.bindKey2"
              >
                <div
                  class="previewOption"
                  @click="
                    handlePreviewOptionClick({
                      type: item.type,
                      pictureUrl: item.pictureUrl,
                      typeCode: item.typeCode
                    })
                  "
                >
                  <div class="triangle_playIcon"></div>
                  <img :src="videoPreviewImgBox_wheelAxle_url" ref="videoPreviewImgBox_wheelAxle" />
                  <span class="previewDescribe previewDescribe_video">轮轴视频</span>
                </div>
              </div>
              <div
                class="previewItem"
                :class="mediaData.typeCode === item.typeCode ? 'previewItemActive' : ''"
                v-else
                :key="item.typeCode"
              >
                <div
                  class="previewOption"
                  @click="
                    handlePreviewOptionClick({
                      type: item.type,
                      pictureUrl: item.pictureUrl,
                      typeCode: item.typeCode
                    })
                  "
                >
                  <!-- <img :src="urlData.passingCarImg.pictureUrl" alt="" /> -->
                  <el-image :src="item.pictureUrl"> </el-image>
                  <span class="previewDescribe previewDescribe_img">
                    {{ item.typeCode === '0' ? '车牌图片' : '过车图片' }}
                  </span>
                </div>
              </div>
            </template>
            <div class="downLoadBtnBox">
              <cs-btn btnText="下载" class="downLoadBtb" @click.native="handleDownLoadBtnClick" />
            </div>
            <!-- <div class="previewItem" v-for="(item, index) in mediaUrl" :key="index">
              <div
                v-if="item.type === 2"
                class="previewOption"
                @click="handlePreviewOptionClick({ type: item.type, pictureUrl: item.pictureUrl })"
              >
                <img src="" alt="" ref="videoPreviewImgBox" />

                <span class="previewDescribe">视频</span>
              </div>
              <div
                v-else-if="item.type === 1"
                class="previewOption"
                @click="handlePreviewOptionClick({ type: item.type, pictureUrl: item.pictureUrl })"
              >
                <img :src="item.pictureUrl" alt="" />
                <span class="previewDescribe">{{ item.typeCode === '0' ? '车牌' : '过车' }}</span>
              </div>
            </div> -->
          </div>

          <div id="carInfo">
            <cs-tip-label triangleColor="#F3F9FF" :type="overweightTypeText">{{
              overweightText
            }}</cs-tip-label>
            <!-- 超限信息 -->
            <div id="overrunInfo">
              <div class="overrunText tooltip" v-for="(item, index) in overRunData" :key="index">
                <span class="overrunTitle">{{ item.title }}</span>
                <span class="infoText_span overrunInfoText_sapn" v-show="!item.showInput">{{
                  item.text
                }}</span>
                <template v-if="item.isEdit">
                  <el-input
                    v-show="item.showInput"
                    v-model.trim="item.text"
                    class="editInput"
                    :class="item.inputStatus ? 'el_input_active' : ''"
                    @blur="inputBlurEvent(item.id, overRunData)"
                    @keyup.enter.native="enterKeyEvent(item.id, overRunData)"
                  ></el-input>
                  <i
                    class="el-icon-edit"
                    v-show="item.isShowEditIcon"
                    @click="showEditInput(item.id, overRunData)"
                  ></i>
                  <span
                    class="tooltiptext"
                    :style="item.inputStatus === true ? 'display: inline-block' : 'display: none'"
                    >{{ item.errorText }}</span
                  >
                </template>
              </div>
            </div>
            <!-- 图表 -->
            <div id="chartsBox">
              <cs-percent-pie-charts />
            </div>
            <!-- 分割线 -->
            <div id="divider"></div>
            <div id="baseInfo">
              <div class="baseInfo_header">
                <span>基础信息</span>
                <cs-btn
                  btnText="撤销"
                  class="revokeBtn"
                  v-show="examineBtnStatus"
                  @click.native="handleRevokeBtnClick"
                />
              </div>
              <div class="baseInfo_body">
                <div
                  class="overrunText baseInfoText tooltip"
                  v-for="(item, index) in baseInfo_body_data"
                  :key="index"
                >
                  <span class="overrunTitle">{{ item.title }}</span>
                  <span class="infoText_span" v-show="!item.showInput">{{ item.text }}</span>
                  <span class="requiredStart" v-show="item.isRequire">*</span>
                  <template v-if="item.isSelect">
                    <el-select
                      v-model="item.text"
                      :class="item.inputStatus ? 'el_input_active' : ''"
                      placeholder="请选择"
                      v-show="item.showInput"
                      @blur="selectChangeEvent(item.id, baseInfo_body_data, 'blur')"
                      @change="selectChangeEvent(item.id, baseInfo_body_data, 'change')"
                    >
                      <el-option
                        v-for="item2 in item.options"
                        :key="item2.value"
                        :label="item2.label"
                        :value="item2.value"
                      >
                      </el-option>
                    </el-select>
                    <span
                      class="tooltiptext_baseInfo"
                      :style="item.inputStatus === true ? 'display: inline-block' : 'display: none'"
                      >{{ item.errorText }}</span
                    >
                    <i
                      class="el-icon-edit"
                      v-show="item.isShowEditIcon"
                      @click="showEditInput(item.id, baseInfo_body_data)"
                    ></i>
                  </template>
                  <template v-else-if="item.isEdit">
                    <el-input
                      v-show="item.showInput"
                      v-model.trim="item.text"
                      class="editInput"
                      :class="item.inputStatus ? 'el_input_active' : ''"
                      @blur="inputBlurEvent(item.id, baseInfo_body_data)"
                      @keyup.enter.native="enterKeyEvent(item.id, baseInfo_body_data)"
                    ></el-input>
                    <i
                      class="el-icon-edit"
                      v-show="item.isShowEditIcon"
                      @click="showEditInput(item.id, baseInfo_body_data)"
                    ></i>
                    <span
                      class="tooltiptext"
                      :style="item.inputStatus === true ? 'display: inline-block' : 'display: none'"
                      >{{ item.errorText }}</span
                    >
                  </template>
                </div>
              </div>
            </div>
            <div id="btnBox">
              <cs-btn btnText="上一条" @click.native="lastPage" />
              <cs-btn
                btnText="审核"
                @click.native="examineBtnClick"
                v-if="isAudit === 2"
                v-show="!examineBtnStatus"
              />
              <cs-btn btnText="已审核" v-else />
              <cs-btn btnText="完成" v-show="examineBtnStatus" @click.native="completeBtnClick" />
              <cs-btn btnText="下一条" @click.native="nextPage" />
            </div>
          </div>
        </div>
        <div id="overWeightRecordBox">
          <div class="recordHeader">
            <div>
              <span id="recordTitle">{{ getRecordTitle() }}</span>
              <span v-if="fromSource" class="dataSources">{{ `数据来源：${sourceName}` }}</span>
            </div>

            <span>
              <el-link type="primary" class="switchPageLink" @click="lastPageLinkClick"
                >上一页</el-link
              >
              <el-link type="primary" class="switchPageLink" @click="nextPageLinkClick"
                >下一页</el-link
              >
            </span>
          </div>

          <cs-steps
            :recordData="recordData"
            :detailId="detailId"
            @handleMoreBtnClick="handleMoreBtnClick"
          />
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash'

import csTag from '@/components/cs-tag/cs-tag.vue'
import csSteps from '@/components/cs-steps/cs-steps.vue'
import csTipLabel from '@/components/cs-tipLabel/cs-tipLabel.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csPercentPieCharts from '@/components/cs-percentPieCharts/cs-searchDetailPieCharts.vue'
// import Player from '@/components/player/PlayerBox'

import {
  getDataSearchTableData,
  getDataSearchDetailById,
  dataSearchExamine
} from '@/service/monitor/data_search/data_search'
import { getAllSiteName } from '@/service/operate/site_manage/site_manage'
// import { searchCarNum } from '@/service/operate/cart_manage/cart_manage'
import { toPercentage } from '@/utils/dataConversion'
import { isCarNumCorrect, isNumber } from '@/utils/regularVerification'

export default {
  name: 'dataSearchDetail',
  components: {
    csTag,
    csSteps,
    csTipLabel,
    csBtn,
    csPercentPieCharts
    // Player
  },
  created() {
    // 监听数据详情页跳转
    this.$nextTick(() => {
      this.$bus.$on('dataSearchJunkToDetail', (res) => {
        this.currentPage = res.currentPage ?? 1
        this.detailId = res.id
        this.carNumber = res.carNumber
        this.axleNum = res.axleNum
        this.companyName = res.companyName
        this.overweightTye = res.overweightTye
        this.startTime = res.startTime
        this.endTime = res.endTime
        this.fromSource = ''
        this.dialogVisible = true
        // 查询详情页数据
        this.isLoading = true
        this.getDataSearchDetailById(this.detailId)
        this.getDataSearchTableData()
      })
    })

    // 监听车辆管理页跳转
    this.$bus.$on('carManageJunkToDetail', (res) => {
      this.currentPage = res.currentPage ?? 1
      this.detailId = res.id
      this.dataId = res.dataId
      this.carNumber = res.carNumber
      this.fromSource = res.fromSource
      this.sourceName = '车辆管理'
      // 查询详情页数据
      this.isLoading = true
      this.getDataSearchDetailById(this.detailId)
      this.getDataSearchTableData()
      this.dialogVisible = true
    })
    // 监听站点管理页跳转
    this.$bus.$on('siteManageJunkToDetail', (res) => {
      this.currentPage = res.currentPage ?? 1
      this.detailId = res.id
      this.dataId = res.dataId
      this.fromSource = res.fromSource
      this.sourceName = '站点管理'
      // 查询详情页数据
      this.isLoading = true
      this.getDataSearchDetailById(this.detailId)
      this.getDataSearchTableData()
      this.dialogVisible = true
    })
    // 监听企业管理页跳转
    this.$bus.$on('companyManageJunkToDetail', (res) => {
      this.currentPage = res.currentPage ?? 1
      this.detailId = res.id
      this.dataId = res.dataId
      this.fromSource = res.fromSource
      this.sourceName = '企业管理'
      // 查询详情页数据
      this.isLoading = true
      this.getDataSearchDetailById(this.detailId)
      this.getDataSearchTableData()
      this.dialogVisible = true
    })
  },
  watch: {
    dialogVisible(newValue) {
      if (!newValue) {
        this.mediaData = {}
      }
    }
  },
  data() {
    return {
      isLoading: true,
      dialogVisible: false,
      // 详情id
      detailId: '',
      // 站点、车辆、企业id
      dataId: '',
      // 详情数据来源
      fromSource: '',
      sourceName: '',
      carNumber: '',
      axleNum: '',
      companyName: '',
      overweightTye: '',
      startTime: '',
      endTime: '',
      // 原始表格数据
      tempTableData: [],
      // 详情表格数据
      tableData: [],
      // 图片视频url
      mediaUrl: [],
      urlData: [],
      // // 视频url
      // videoUrl: '',
      // // 车牌图片url
      // carNumImg: '',
      // // 过车图片url
      // passingCarImg: '',
      mediaData: {},
      videoPreviewImgBox_url: '',
      videoPreviewImgBox_wheelAxle_url: '',
      // base64格式视频预览图
      // videoImgurl: '',
      overweightTypeText: '',
      overweightText: '',
      percentNum: '',
      examineBtnStatus: false,
      status1T: 0,
      status2T: 0,
      isAudit: '',
      id: '',
      carId: '',
      // 原始和处理过的总重(T)
      originTotalWeight: '',
      handleTotalWeight: '',
      dataSearchDetailId: [],
      currentPage: 1,
      totalPage: '',
      isFirstData: false,
      isLastData: false,
      recordData: [
        // {
        //   level: 'warning',
        //   percent: '4.65%',
        //   time: '09-31 15:11:52',
        //   carModel: '周铁S230'
        // }
      ],
      overRunData: [
        {
          id: 10,
          title: '总质量',
          text: '48.224t',
          isEdit: true,
          isShowEditIcon: false,
          showInput: false,
          inputStatus: false,
          errorText: '',
          isNunber: true
        },
        {
          id: 11,
          title: '总质量限值',
          text: '40t',
          isEdit: false
        },
        {
          id: 12,
          title: '超限重',
          text: '8.224t',
          isEdit: false
        },
        {
          id: 13,
          title: '总轴数',
          text: '2',
          isEdit: true,
          isShowEditIcon: false,
          showInput: false,
          inputStatus: false,
          errorText: '',
          isNunber: true
        }
      ],
      baseInfo_body_data: [
        {
          id: 1,
          title: '检测站点',
          text: '周铁S230',
          isEdit: true,
          isShowEditIcon: false,
          showInput: false,
          inputStatus: false,
          errorText: '',
          isSelect: true,
          options: []
        },
        {
          id: 2,
          title: '车 牌 号',
          text: '鲁Q200CE',
          originText: '鲁Q200CE',
          isEdit: true,
          isShowEditIcon: false,
          showInput: false,
          inputStatus: false,
          errorText: '',
          isRequire: true
        },
        {
          id: 3,
          title: '车牌颜色',
          text: '黄色',
          isEdit: true,
          isShowEditIcon: false,
          showInput: false,
          inputStatus: false,
          errorText: ''
          // isSelect: true,
          // options: [
          //   {
          //     value: '黄色',
          //     label: '黄色'
          //   },
          //   {
          //     value: '蓝色',
          //     label: '蓝色'
          //   },
          //   {
          //     value: '绿色',
          //     label: '绿色'
          //   }
          // ]
        },
        {
          id: 4,
          title: '企业名称',
          text: '载货汽车',
          isEdit: false
        },
        {
          id: 5,
          title: '检测时间',
          text: '2021-09-31 15:11:52',
          isEdit: false
        },
        // {
        //   id: 6,
        //   title: '检测数据来源',
        //   text: '快速动态检测数据',
        //   isEdit: false
        // },
        {
          id: 7,
          title: '检测单号',
          text: '32025415315315321531252314324',
          isEdit: false
        },
        {
          id: 14,
          title: '审核意见',
          text: '',
          isEdit: true,
          isShowEditIcon: false,
          showInput: false,
          inputStatus: false,
          errorText: ''
        }
      ]
    }
  },
  methods: {
    open() {
      this.getAllSiteName()
    },
    close() {
      this.$bus.$off('updateCsPercentCharts')
      this.overRunData.forEach((item) => {
        item.isShowEditIcon = false
        item.showInput = false
        item.inputStatus = false
      })
      this.baseInfo_body_data.forEach((item) => {
        item.isShowEditIcon = false
        item.showInput = false
        item.inputStatus = false
      })
      this.examineBtnStatus = false
      this.videoPreviewImgBox_url = ''
      this.videoPreviewImgBox_wheelAxle_url = ''
      // this.$bus.$off('dataSearchJunkToDetail')
    },
    // 撤销按钮点击
    handleRevokeBtnClick() {
      this.overRunData.forEach((item) => {
        item.isShowEditIcon = false
        item.showInput = false
        item.inputStatus = false
      })
      this.baseInfo_body_data.forEach((item) => {
        item.isShowEditIcon = false
        item.showInput = false
        item.inputStatus = false
      })
      this.examineBtnStatus = false
    },
    handleDownLoadBtnClick() {
      // const sourceData = []
      // console.log(this.urlData)
      // for (const key in this.urlData) {
      //   sourceData.push({
      //     title: this.urlData[key].title,
      //     type: this.urlData[key].type,
      //     pictureUrl: this.urlData[key].pictureUrl,
      //     typeCode: this.urlData[key].typeCode,
      //     carNum: this.urlData[key].carNum,
      //     time: this.urlData[key].time
      //   })
      // }

      this.$bus.$emit('sourceDownLoadEvent', this.urlData)
    },

    getRecordTitle() {
      if (this.fromSource) {
        return '本月过车记录'
      } else {
        if (this.startTime && this.endTime) {
          return `${this.startTime} 至 ${this.endTime}过车记录`
        } else {
          return '30天内过车记录'
        }
      }
    },
    async getAllSiteName() {
      console.log('数据查询详情页获取站点名称')
      const { data } = await getAllSiteName()
      console.log(data)
      if (data.code === 0) {
        // const newData = [...new Set(data.data)]
        this.baseInfo_body_data[0].options = []
        data.data.forEach((item) => {
          this.baseInfo_body_data[0].options.push({
            value: item,
            label: item
          })
        })
      }
    },
    // 预览项被点击
    handlePreviewOptionClick(data) {
      this.mediaData = data
    },
    examineBtnClick() {
      this.examineBtnStatus = true
      this.overRunData.forEach((item) => {
        item.isShowEditIcon = true
      })
      this.baseInfo_body_data.forEach((item) => {
        item.isShowEditIcon = true
      })
    },
    async completeBtnClick() {
      this.isLoading = true
      this.status1T = 0
      this.status2T = 0

      this.overRunData.forEach((item) => {
        item.isShowEditIcon = true
        if (item.isRequire) {
          if (!item.text || item.text === '') {
            item.showInput = true
            item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
            item.inputStatus = true
            this.isLoading = false
          } else {
            this.status1T++
          }
        } else {
          if (item.isNunber) {
            if (item.text) {
              if (!isNumber(item.text)) {
                item.showInput = true
                item.errorText = '请输入0-9位的数字'
                item.inputStatus = true
                this.isLoading = false
              } else {
                this.status1T++
              }
            } else {
              this.status1T++
            }
          } else {
            this.status1T++
          }
        }
      })

      this.baseInfo_body_data.forEach(async (item) => {
        item.isShowEditIcon = true

        if (item.isRequire) {
          if (!item.text || item.text === '') {
            item.showInput = true
            item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
            item.inputStatus = true
            this.isLoading = false
          }
        }
        if (item.id === 2) {
          if (item.text) {
            if (!isCarNumCorrect(item.text)) {
              item.showInput = true
              item.errorText = '请输入正确格式的车牌号'
              item.inputStatus = true
              this.isLoading = false
            } else {
              if (item.text !== item.originText) {
                // const data = await this.isCarNumRepeat(item.text)
                // if (data.code === 1) {
                //   item.showInput = true
                //   item.errorText = data.msg
                //   item.inputStatus = true
                //   this.isLoading = false
                //   return false
                // } else if (data === false) {
                //   item.showInput = true
                //   this.isLoading = false
                //   return false
                // } else {
                console.log('bbb')
                this.status2T++
                // this.submit()
                // }
              } else {
                this.status2T++
              }
            }
          } else {
            item.showInput = true
            item.errorText = '车牌号不能为空'
            item.inputStatus = true
            this.carNumberStatus = false
            this.isLoading = false
          }
        } else {
          this.status2T++
        }
      })

      if (
        this.status1T === this.overRunData.length &&
        this.status2T === this.baseInfo_body_data.length
      ) {
        this.$confirm('此操作将会修改车辆信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.submit()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改'
            })
            this.isLoading = false
          })
      }
    },
    async submit() {
      // if (
      //   this.status1T === this.overRunData.length &&
      //   this.status2T === this.baseInfo_body_data.length
      // ) {
      const { data } = await dataSearchExamine({
        id: this.id,
        carId: this.carId,
        flag: 0,
        carNum: _.toUpper(this.baseInfo_body_data[1].text),
        companyName: this.baseInfo_body_data[3].text,
        axleNum: this.overRunData[3].text,
        // 如果总重没变，则把原始总重数据转换为kg，否则就把新输入的单位转换为kg
        // totalWeight:
        //   this.overRunData[0].text.split('t')[0] === this.handleTotalWeight
        //     ? tToKg(this.originTotalWeight)
        //     : tToKg(this.overRunData[0].text.split('t')[0]),
        totalWeight: this.overRunData[0].text,
        siteName: this.baseInfo_body_data[0].text,
        color: this.baseInfo_body_data[2].text,
        opinion: this.baseInfo_body_data[6].text
      })
      console.log(data)
      if (data.code === 0) {
        this.$message({
          message: '审核成功',
          type: 'success'
        })
        this.overRunData.forEach((item) => {
          item.isShowEditIcon = false
          item.showInput = false
        })
        this.baseInfo_body_data.forEach((item) => {
          item.isShowEditIcon = false
          item.showInput = false
        })
        this.examineBtnStatus = false
        this.getDataSearchDetailById(this.detailId)
        if (this.fromSource === '') {
          this.$bus.$emit('dataSearchDrawerDataUpdate')
          this.$bus.$emit('dataSearchDrawerDataUpdate_updateStatus')
        }
      }

      // }
    },
    // 显示输入框图标
    showEditInput(id, data) {
      for (const item of data) {
        if (item.id === id) {
          item.showInput = true
          item.isShowEditIcon = false
        }
      }
    },
    // 输入框失去焦点事件
    inputBlurEvent(id, data) {
      data.forEach(async (item) => {
        if (id === item.id) {
          if (item.isRequire) {
            if (item.text.trim() === '') {
              item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
              item.inputStatus = true
              return
            }
          }

          // 判断是否是数字
          if (item.isNunber) {
            if (item.text) {
              if (!isNumber(item.text)) {
                item.errorText = '请输入0-9的数字'
                item.inputStatus = true
                return
              }
            }
          }

          // 判断车牌号是否重复
          if (item.id === 2) {
            if (item.text) {
              if (!isCarNumCorrect(item.text)) {
                item.errorText = '请输入正确的车牌号'
                item.inputStatus = true
                return
              }
            }
            // if (item.text !== item.originText) {
            //   const data = await this.isCarNumRepeat(item.text)
            //   if (data.code === 1) {
            //     item.errorText = data.msg
            //     item.inputStatus = true
            //     return
            //   } else if (data === false) {
            //     return
            //   }
            // }
          }
          item.inputStatus = false
          item.showInput = false
          item.isShowEditIcon = true
        }
      })
    },
    // 按回车键事件
    enterKeyEvent(id, data) {
      data.forEach(async (item) => {
        if (id === item.id) {
          if (item.isRequire) {
            if (item.text.trim() === '') {
              item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
              item.inputStatus = true
              return
            }
          }

          // 判断是否是数字
          if (item.isNunber) {
            if (item.text) {
              if (!isNumber(item.text)) {
                item.errorText = '请输入0-9的数字'
                item.inputStatus = true
                return
              }
            }
          }
          // 判断车牌号是否重复
          if (item.id === 2) {
            if (item.text) {
              if (!isCarNumCorrect(item.text)) {
                item.errorText = '请输入正确的车牌号'
                item.inputStatus = true
                return
              }
            }
            // if (item.text !== item.originText) {
            //   const data = await this.isCarNumRepeat(item.text)
            //   if (data.code === 1) {
            //     item.errorText = data.msg
            //     item.inputStatus = true
            //     return
            //   } else if (data === false) {
            //     return
            //   }
            // }
          }
          item.inputStatus = false
          item.showInput = false
          item.isShowEditIcon = true
        }
      })
    },
    selectChangeEvent(id, data, msg) {
      if (msg === 'blur') {
        setTimeout(() => {
          data.forEach((item) => {
            if (id === item.id) {
              if (item.text.trim() === '') {
                item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
                item.inputStatus = true
              } else {
                item.inputStatus = false
                item.showInput = false
                item.isShowEditIcon = true
              }
            }
          })
        }, 300)
      } else {
        data.forEach((item) => {
          if (id === item.id) {
            if (item.text.trim() === '') {
              item.errorText = `${item.title.replace(/\s*/g, '')}不能为空`
              item.inputStatus = true
            } else {
              item.inputStatus = false
              item.showInput = false
              item.isShowEditIcon = true
            }
          }
        })
      }
    },
    // async isCarNumRepeat(carNumber) {
    //   const { data } = await searchCarNum({ carNumber })
    //   if (data.code === 1) {
    //     return {
    //       code: data.code,
    //       msg: data.msg
    //     }
    //   } else if (data.code === 0) {
    //     return {
    //       code: data.code,
    //       msg: data.msg
    //     }
    //   } else {
    //     this.$message.error('服务器出错了')
    //     return false
    //   }
    // },
    handleMoreBtnClick(id) {
      // this.$router.push({
      //   path: '/home/data_search/detail',
      //   query: {
      //     id,
      //     currentPage: 1,
      //     fromSource: true,
      //     name: this.dialogData.carPhone
      //   }
      // })
      if (id === this.detailId) return
      this.detailId = id
      this.getDataSearchDetailById(this.detailId)
      // this.getDataSearchTableData()
    },
    async getDataSearchDetailById(id) {
      this.handleRevokeBtnClick()
      this.isLoading = true
      this.urlData = []
      console.log(id)
      try {
        const { data } = await getDataSearchDetailById({ id })
        console.log(data)
        if (data.code === 0) {
          console.log(this.mediaData)
          this.mediaUrl = null
          this.mediaData = null
          // this.urlData.videoUrl = ''
          // this.urlData.passingCarImg = ''
          // this.urlData.carNumImg = ''
          console.log(this.mediaData)
          const { entity, mediaUrl } = data.data
          console.log(entity)
          this.overweightTypeText = this.getStepType(entity.overweightType)
          this.overweightText = this.getStepText(entity.overweightType)
          console.log(mediaUrl)

          mediaUrl.forEach((item) => {
            console.log(item)
            if (item.type === 2) {
              if (item.typeCode === null) {
                this.findvideocover(item.pictureUrl, null)
                this.urlData.push({
                  bindKey: '6',
                  title: '车牌视频',
                  type: item.type,
                  pictureUrl: item.pictureUrl,
                  typeCode: null,
                  carNum: entity.carNum,
                  time: entity.createTime
                })
              } else if (item.typeCode === '5') {
                this.findvideocover(item.pictureUrl, '5')
                this.urlData.push({
                  bindKey2: '5',
                  title: '轮轴视频',
                  type: item.type,
                  pictureUrl: item.pictureUrl,
                  typeCode: '5',
                  carNum: entity.carNum,
                  time: entity.createTime
                })
              }
            }
          })

          mediaUrl.forEach((item) => {
            if (item.type === 1) {
              if (item.typeCode === '0') {
                this.urlData.push({
                  title: '车牌图片',
                  type: item.type,
                  pictureUrl: item.pictureUrl,
                  typeCode: '0',
                  carNum: entity.carNum,
                  time: entity.createTime
                })
              } else {
                this.urlData.push({
                  title: `过车图片${item.typeCode}`,
                  type: item.type,
                  pictureUrl: item.pictureUrl,
                  typeCode: item.typeCode,
                  carNum: entity.carNum,
                  time: entity.createTime
                })
              }
            }
          })

          this.mediaUrl = mediaUrl
          this.mediaData = this.urlData[0]
          // this.mediaData =
          //   this.urlData.videoUrl ??
          //   this.urlData.videoUrl_wheelAxle ??
          //   this.urlData.passingCarImg ??
          //   this.urlData.carNumImg
          // console.log(this.mediaData)
          // console.log(this.mediaUrl)

          // this.mediaUrl

          // id
          this.id = entity.id
          // 车辆ID
          this.carId = entity.carId
          // 是否审核
          this.isAudit = entity.isAudit
          // 总重
          // this.originTotalWeight = kgToT(entity.totalWeight).originNum
          // this.handleTotalWeight = kgToT(entity.totalWeight).handleNum
          this.overRunData[0].text = entity.totalWeight + ''
          // 标重
          this.overRunData[1].text = entity.stdWeight + ''
          // this.overRunData[1].text = kgToT(entity.stdWeight).handleNum + 't'
          // 超限重
          this.overRunData[2].text = entity.overWeight + ''
          // this.overRunData[2].text = kgToT(entity.overWeight).handleNum + 't'
          // 总轴数
          this.overRunData[3].text = entity.axleNum + ''

          // 超限率图表数据
          const rateNum = (entity.overWeight / entity.stdWeight) * 100
          // 判断是不是浮点数
          const regEXP = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+)$/
          if (regEXP.test(rateNum)) {
            this.percentNum = rateNum.toFixed(2)
          } else {
            this.percentNum = rateNum
          }
          // 初始化图表
          // this.$bus.$emit('updateCsPercentCharts', this.percentNum)
          this.$store.commit('m_searchDetail/upDatePercentNum', this.percentNum)

          // 检测站点
          this.baseInfo_body_data[0].text = entity.siteName + ''
          // 车牌号
          this.baseInfo_body_data[1].text = entity.carNum + ''
          this.baseInfo_body_data[1].originText = entity.carNum + ''
          // 车牌颜色
          this.baseInfo_body_data[2].text = entity.color + ''
          // 交通车型
          this.baseInfo_body_data[3].text = entity.companyName ? entity.companyName + '' : '—'
          // 检测时间
          this.baseInfo_body_data[4].text = entity.createTime + ''
          // // 检测数据来源
          // this.baseInfo_body_data[5].text = entity.carNum
          // // 检测单号
          this.baseInfo_body_data[5].text = entity.id + ''
          // 审核
          this.baseInfo_body_data[6].text = entity.opinion + ''
          this.isLoading = false
        } else if (data.code === 500) {
          this.$message({
            message: data.msg,
            type: 'warning'
          })
          // setTimeout(() => {
          //   this.isLoading = false
          // }, 5000)
        }
      } catch (err) {
        console.warn(err)
        this.$message.error('获取详情信息失败')
        // setTimeout(() => {
        //   this.isLoading = false
        // }, 5000)
      }
    },
    // 获取表格数据
    async getDataSearchTableData(pageNum = this.currentPage, pageSize = 10) {
      try {
        const date = new Date()
        const currentYear = date.getFullYear()
        const currentMonth = date.getMonth() + 1
        const nextMonth = currentMonth + 1 === 13 ? 1 : currentMonth + 1
        const nextYear = currentMonth + 1 === 13 ? currentYear + 1 : currentYear
        if (this.fromSource === 'company') {
          this.tempTableData = await getDataSearchTableData({
            pageNum,
            pageSize,
            companyId: this.dataId,
            startTime: `${currentYear}-${currentMonth}-01 00:00:00`,
            endTime: `${nextYear}-${nextMonth}-01 00:00:00`
          })
        } else if (this.fromSource === 'site') {
          this.tempTableData = await getDataSearchTableData({
            pageNum,
            pageSize,
            siteId: this.dataId,
            startTime: `${currentYear}-${currentMonth}-01 00:00:00`,
            endTime: `${nextYear}-${nextMonth}-01 00:00:00`
          })
        } else if (this.fromSource === 'car') {
          this.tempTableData = await getDataSearchTableData({
            pageNum,
            pageSize,
            carId: this.dataId,
            carNumber: this.carNumber,
            startTime: `${currentYear}-${currentMonth}-01 00:00:00`,
            endTime: `${nextYear}-${nextMonth}-01 00:00:00`
          })
        } else {
          console.log(this.currentPage)
          if (this.startTime && this.endTime) {
            this.tempTableData = await getDataSearchTableData({
              pageNum,
              pageSize,
              carNumber: this.carNumber,
              axleNum: this.axleNum,
              companyName: this.companyName,
              overweightTye: this.overweightTye,
              startTime: this.startTime,
              endTime: this.endTime
            })
          } else {
            // 获取当前时间
            const myDate = new Date()
            const arr = myDate.toLocaleString('chinese', { hour12: false })
            // 当前时间
            const currentTime = arr.split('/').join('-')

            // 获取三十天前日期
            const lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30)
            const lastY = lw.getFullYear()
            const lastM = lw.getMonth() + 1
            const lastD = lw.getDate()
            const startdate =
              lastY +
              '-' +
              (lastM < 10 ? '0' + lastM : lastM) +
              '-' +
              (lastD < 10 ? '0' + lastD : lastD)
            // 三十天之前日期
            const thirtyDaysAgoTime = startdate + ' 00:00:00'

            this.tempTableData = await getDataSearchTableData({
              pageNum,
              pageSize,
              carNumber: this.carNumber,
              axleNum: this.axleNum,
              companyName: this.companyName,
              overweightTye: this.overweightTye,
              startTime: thirtyDaysAgoTime,
              endTime: currentTime
            })
          }
        }

        console.log(this.tempTableData)
        if (this.tempTableData.data.code === 0) {
          this.tableData = this.tempTableData.data.data
          console.log(this.tableData)
          this.currentPage = this.tableData.currPage
          this.totalPage = this.tableData.totalPage
          this.dataSearchDetailId = []
          this.tableData.list.forEach((item) => {
            this.dataSearchDetailId.push(item.id)
          })

          this.recordData = []
          this.tableData.list.forEach((item) => {
            item.createTime = item.createTime.split('-')
            item.createTime = item.createTime[1] + '-' + item.createTime[2]
            this.recordData.push({
              id: item.id,
              level: this.getStepType(item.overweightType),
              percent: toPercentage(item.overRate).handleNum2 + '%',
              time: item.createTime,
              carModel: item.siteName
            })
          })
        } else if (this.tempTableData.data.code === 500) {
          this.$message({
            message: this.tempTableData.data.msg,
            type: 'warning'
          })
        } else {
          this.$message.error('获取记录失败')
        }
      } catch (err) {
        console.log(err)
        this.$message.error('获取表格数据失败')
      }
    },
    // 获取视频第一帧作为预览图
    findvideocover(url, type) {
      console.log('截取视频第一帧')
      // const video = document.getElementById('previewVideoBox') // 获取视频对象
      // const video = document.createElement("video") // 也可以自己创建video
      // video.src = url // url地址 url跟 视频流是一样的

      const video = document.createElement('video')

      video.setAttribute('autoplay', 'autoplay')
      // 再添加一个静音的属性，否则自动播放会有声音
      video.setAttribute('muted', 'muted')
      video.innerHTML = '<source src=' + url + ' type="audio/mp4">'

      const canvas = document.getElementById('videoCanvas') // 获取 canvas 对象
      const ctx = canvas.getContext('2d') // 绘制2d
      console.log(video.onloadstart)
      video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
      video.currentTime = 1 // 第一帧
      // video.oncanplay = () => {
      //   console.log('bbaacc')
      //   canvas.width = video.clientWidth // 获取视频宽度
      //   canvas.height = video.clientHeight // 获取视频高度
      //   // 利用canvas对象方法绘图
      //   ctx.drawImage(video, 0, 0, video.clientWidth, video.clientHeight)
      //   // 转换成base64形式
      //   this.imgsrc = canvas.toDataURL('image/png') // 截取后的视频封面
      //   this.videoImgurl = this.imgsrc
      // }

      video.addEventListener(
        'canplay',
        () => {
          // 创建画布的宽高属性节点，就是图片的大小，单位PX
          const anw = document.createAttribute('width')
          anw.nodeValue = 500
          const anh = document.createAttribute('height')
          anh.nodeValue = 300
          // canvas.width = video.clientWidth
          // canvas.height = video.clientHeight
          canvas.setAttributeNode(anw)
          canvas.setAttributeNode(anh)
          // 画布渲染
          ctx.drawImage(video, 0, 0, 500, 300)
          // 生成图片
          const base64 = canvas.toDataURL('image/png') // 这就是封面图片的base64编码
          // 视频结束播放的事件
          video.pause()
          // this.videoImgurl = base64 // 可打印看是不是base64编码图片

          // 把视频预览图赋值到预览框上
          if (type === null) {
            this.$nextTick(() => {
              if (!this.$refs.videoPreviewImgBox) return
              this.videoPreviewImgBox_url = base64
              // this.$refs.videoPreviewImgBox.src = base64
              // }
            })
          } else if (type === '5') {
            this.$nextTick(() => {
              if (!this.$refs.videoPreviewImgBox_wheelAxle) return
              this.videoPreviewImgBox_wheelAxle_url = base64
              // this.$refs.videoPreviewImgBox_wheelAxle.src = base64
            })
          }
        },
        false
      )
    },
    async lastPage() {
      console.log(this.detailId)
      const dataIndex = this.dataSearchDetailId.indexOf(parseInt(this.detailId))
      console.log(dataIndex)
      // || dataIndex === -1
      if (dataIndex === 0 || dataIndex === -1) {
        this.$message('已经是第一条了')
      } else {
        this.detailId = this.dataSearchDetailId[dataIndex - 1]
        this.getDataSearchDetailById(this.dataSearchDetailId[dataIndex - 1])
      }
    },
    async nextPage() {
      console.log(this.detailId)
      const dataIndex = this.dataSearchDetailId.indexOf(parseInt(this.detailId))
      console.log(dataIndex)
      if (dataIndex === this.dataSearchDetailId.length - 1) {
        this.$message('已经是最后一条了')
      } else {
        console.log(this.dataSearchDetailId[dataIndex])
        console.log(dataIndex)
        console.log(this.dataSearchDetailId[dataIndex + 1])
        console.log(dataIndex + 1)
        console.log(this.recordData)
        this.detailId = this.dataSearchDetailId[dataIndex + 1]
        this.getDataSearchDetailById(this.dataSearchDetailId[dataIndex + 1])
      }
    },
    async lastPageLinkClick() {
      console.log(this.currentPage)
      if (this.currentPage === 1) {
        this.$message('已经是第一页了')
        return false
      } else {
        this.isLoading = true
        await this.getDataSearchTableData(this.currentPage - 1)
        this.getDataSearchDetailById(this.recordData[0].id)
        this.detailId = this.recordData[0].id
      }
    },
    async nextPageLinkClick() {
      console.log(this.currentPage)
      console.log(this.totalPage)
      // || this.currentPage === 1
      if (this.currentPage === this.totalPage || this.totalPage === 0) {
        this.$message('已经是最后一页了')
        return false
      } else {
        this.isLoading = true
        await this.getDataSearchTableData(this.currentPage + 1)
        this.getDataSearchDetailById(this.recordData[0].id)
        this.detailId = this.recordData[0].id
      }
    },
    // 判断cs-step的类型
    getStepType(type) {
      if (type === 0) {
        return 'success'
      } else if (type === 1) {
        return 'warning'
      } else if (type === 2) {
        return 'serious'
      } else {
        return 'danger'
      }
    },
    getStepText(type) {
      if (type === 0) {
        return '没有超重'
      } else if (type === 1) {
        return '轻度超重'
      } else if (type === 2) {
        return '较轻超重'
      } else {
        return '严重超重'
      }
    }
  }
}
</script>

<style scoped>
.el-card >>> .el-card__body {
  height: 100%;
  padding: 16px;
}

#carInfoBox_top {
  display: flex;
}

#previewBox {
  position: relative;
  /* width: 1000px;
  height: 610px; */
  width: 978px;
  height: 532px;
  margin-right: 22px;
}

.previewBox_innerBox {
  width: 100%;
  height: 100%;
}

#previewBox img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

#previewBox .cs-tag {
  position: absolute;
  right: 0;
  bottom: 0;
  /* width: 196px;
  height: 62px;
  line-height: 62px;
  font-size: 28px; */
  width: 178px;
  height: 58px;
  line-height: 58px;
  font-size: 26px;
  text-align: center;
}

#previewItemBox {
  position: relative;
  /* width: 150px;
  height: 610px; */
  width: 180px;
  /* width: 136px; */
  height: 532px;
  padding-top: 5px;
  padding-left: 8px;
  overflow-y: scroll;
}

.previewItem {
  position: relative;
  /* height: 88px; */
  width: 136px;
  height: 80px;
  margin-bottom: 10px;
  cursor: pointer;
}

.previewDescribe_video {
  background-color: #006eff;
}

.previewDescribe_img {
  background-color: #67c23a;
}

.previewOption {
  position: relative;
  width: 100%;
  height: 100%;
}

.triangle_playIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 15px solid #dcdfe6;
  border-bottom: 10px solid transparent;
  z-index: 10;
}

.previewDescribe {
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  /* width: 35px; */
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0 5px;
  color: #fff;
}

.previewItem img {
  position: absolute;
  width: 100%;
  /* height: 88px; */
  height: 80px;
  /* transition: all 0.5s ease; */
}

.previewItem .el-image {
  position: absolute;
  width: 100%;
  /* height: 88px; */
  height: 80px;
  /* transition: all 0.5s ease; */
}

#previewVideoBox {
  width: 100%;
  height: 532px;
}

.previewItemActive {
  top: -5px;
  left: -8px;
  /* width: 164px;
  height: 104px; */
  width: 148px !important;
  height: 88px !important;
  border: 1px solid #0f73f6;
  /* transition: all 0.5s ease; */
}

.downLoadBtnBox {
  position: sticky;
  padding-top: 10px;
  padding-bottom: 1px;
  background: #fff;
  bottom: -1px;
}

.downLoadBtb {
  margin-left: 13px;
}

/* 车辆信息样式start */
#carInfo {
  position: relative;
  width: 452px;
  /* height: 610px; */
  height: 532px;
  margin-left: 34px;
  padding: 0 24px;
  background-color: #f3f9ff;
}

.cs-tip-label {
  top: 24px;
  left: -24px;
}

/* 车辆信息样式end */

#overWeightRecordBox {
  width: 100%;
  /* height: 124px; */
  height: 232px;
}

.recordHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.switchPageLink {
  margin-left: 10px;
}

#recordTitle {
  display: inline-block;
  font-size: 22px;
  margin-top: 26px;
  margin-bottom: 16px;
}

.dataSources {
  margin-left: 10px;
}

.cs-step {
  width: 100%;
}

#overrunInfo {
  display: inline-block;
  width: 300px;
  height: 60px;
  margin-top: 22px;
  margin-right: 16px;
  margin-bottom: 8px;
  /* padding-left: 24px; */
}

.cs-tip-label {
  margin-bottom: 10px;
}

#chartsBox {
  position: absolute;
  top: 12px;
  right: 20px;
  display: inline-block;
  width: 107px;
  height: 107px;
}

.overrunTitle {
  color: #939393;
  font-size: 14px;
}

.overrunText {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
}

.overrunText:nth-of-type(odd) {
  width: 125px;
}

.overrunText:nth-of-type(even) {
  width: 150px;
}

#divider {
  width: 100%;
  transform: scale(1);
  border: 1px solid #e5e5e5;
}

#baseInfo {
  width: 318px;
}

.baseInfo_header {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 700;
}

.revokeBtn {
  width: 50px !important;
  height: 24px !important;
  line-height: 24px !important;
}

.cs-btn {
  width: 76px;
  height: 22px;
  /* padding: 0 12px; */
}

.baseInfo_body {
  width: 400px;
}

/* 覆盖掉overrunText类的样式 */
.baseInfoText {
  width: 100% !important;
  margin-top: 8px;
  display: block;
}

/* 覆盖掉overrunText奇数类名的宽度限制 */
.baseInfoText:nth-of-type(odd) {
  width: 100%;
}

.infoText_span {
  padding-left: 10px;
  font-size: 16px;
  font-weight: 700;
}

.overrunInfoText_sapn {
  font-size: 18px;
}

#btnBox {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 50px;
}

.cs-btn {
  width: 110px;
  height: 34px;
  line-height: 34px;
  margin-right: 30px;
}

.cs-btn:last-child {
  margin-right: 0;
}

.editInput {
  width: 60%;
  margin-left: 5px;
}

.editInput >>> .el-input__inner {
  height: 25px;
  border-radius: 0;
}

/* 编辑图标 */
.el-icon-edit {
  cursor: pointer;
}

.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip 文本 */
.tooltiptext {
  width: 120px;
  background-color: #fff;
  color: black;
  text-align: center;
  padding: 5px 0;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  margin-left: 10px;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

  /* 定位 */
  position: absolute;
  z-index: 1;
}

/* Tooltip 箭头 */
.tooltip .tooltiptext::after {
  content: ' ';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #fff transparent transparent;
}

.el-card {
  overflow: visible;
}

.el_input_active >>> .el-input__inner {
  border-color: #f56c6c;
}

.el-select >>> .el-input__inner {
  height: 25px;
  line-height: 25px;
  border-radius: 0;
}

.el-select {
  margin-left: 5px;
}

.el-select >>> .el-input__icon {
  line-height: 25px;
}

.requiredStart {
  position: absolute;
  top: 1px;
  left: -7px;
  color: #e02020;
  font-size: 14px;
}

/* 预览项样式end */
</style>
